<template>
  <base-breadcrumb>
    <a-card :bordered="false" class="treeSelIconStyle">
      <div class="card-box">
        <div class="card-title">客户服务系统看板</div>
        <div style="width: 320px;">
          <org-tree-select v-model="branchComId" isNeedOrgId isSpecialTree isShowProjectStatus allowClear :needTags="['CO', 'BC', 'PD']"
            :isHasChildren="false" style="width: 320px" @change="getBranchComId" :need-tags="['CO', 'BC', 'PD']"></org-tree-select>
        </div>
        <!-- <SelectCompanyAndProject ref="selectSubCompany" v-model="branchComId" placeholder="请选择" style="width: 320px" :autoSelect="true" @change="getBranchComId" /> -->
      </div>
    </a-card>

    <a-row :gutter="12">
      <a-col :span="9">
        <a-card v-loading="loading" :bordered="false" style="padding: 0 0 30px 0; height: 210px">
          <title-name title="投诉概况" />
          <div class="flex-bet">
            <div class="border-right">
              <div class="title-top" @click="handleTots">
                {{ blPick || '0/0' }}
                <span class="unit-name">次</span>
              </div>
              <div class="title-margin">本年度已处理投诉/本年度投诉</div>
            </div>
            <div class="border-right">
              <div class="title-top" @click="handleToTime">
                {{ numPick }}
                <span class="unit-name">次</span>
              </div>
              <div class="title-margin">本月投诉数量</div>
            </div>
            <div>
              <a-progress style="height: 80px; cursor: pointer" :width="80" type="circle" :stroke-color="{
                '0%': '#AFD3E7',
                '100%': '#73B9E1'
              }" :stroke-width="12" :percent="oncePick" @click="handleTooncets" />
              <div class="title-margin">本月投诉一次性处理率</div>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :span="9">
        <a-card v-loading="loading" :bordered="false" style="padding: 0 0 30px 0; height: 210px">
          <title-name title="维保概况" />
          <div class="flex-bet">
            <div class="border-right">
              <div class="title-top" @click="handleToWb">
                {{ wbNumber }}
                <span class="unit-name">次</span>
              </div>
              <div class="title-margin">维保中数量</div>
            </div>

            <div class="border-right">
              <a-progress type="circle" style="height: 80px; cursor: pointer" :width="80" :stroke-color="{
                '0%': '#AFD3E7',
                '100%': '#73B9E1'
              }" :stroke-width="12" :percent="wbOnce" @click="handleToWbCs" />
              <div class="title-margin">本年维保一次性处理率</div>
            </div>
            <div>
              <div class="title-top" @click="handleToWbPick">
                {{ wbNumberPick }}
                <span class="unit-name">分</span>
              </div>
              <div class="title-margin">本年维保满意度平均分</div>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card v-loading="loading" :bordered="false" style="padding: 0 0 30px 0; height: 210px">
          <title-name title="表扬信概况" />
          <div class="flex-bet">
            <div class="border-right">
              <div class="title-top" @click="handleTestimonial(1, testimonial)">
                {{ testimonial.yearNum || 0 }}
                <span class="unit-name">次</span>
              </div>
              <div class="title-margin">本年度表扬信数量</div>
            </div>
            <div>
              <div class="title-top" @click="handleTestimonial(2, testimonial)">
                {{ testimonial.monthNum || 0 }}
                <span class="unit-name">次</span>
              </div>
              <div class="title-margin">本月表扬信数量</div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>
    <a-row :gutter="12">
      <a-col :span="24">
        <a-card v-loading="lineload" :bordered="false">
          <title-name title="满意度趋势统计" />
          <div v-if="lineData.score && lineData.score.length && lineData.time && lineData.time.length" id="line"
            style="width: 100%; height: 400px" />
          <a-empty v-else description="暂无数据" />
        </a-card>
      </a-col>
    </a-row>
    <a-row :gutter="12" v-if="branchComId == '53085e2c9f1f4685801ef31994f57c49'" utter="12">
      <a-col :span="12">
        <a-card v-loading="loadingObj.loadingBnc" :bordered="false">
          <title-name title="各分公司本年度投诉数量" />
          <div v-if="!loadingObj.loadingBnc" id="complaint" style="width: 100%; height: 300px" />
          <a-empty v-else description="暂无数据" />
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card v-loading="loadingObj.loadingBncType" :bordered="false">
          <title-name title="投诉类型分布分析" />
          <div v-if="!loadingObj.loadingBncType" id="complaintType" style="width: 100%; height: 300px" />
          <a-empty v-else description="暂无数据" />
        </a-card>
      </a-col>
    </a-row>
    <a-row :gutter="12" v-if="branchComId == '53085e2c9f1f4685801ef31994f57c49'" utter="12">
      <a-col :span="12">
        <a-card v-loading="loadingObj.countPraiseNum" :bordered="false">
          <title-name title="各分公司本年度表扬信数量" />
          <div v-if="!loadingObj.countPraiseNum" id="annualTestimonial" style="width: 100%; height: 300px" />
          <a-empty v-else description="暂无数据" />
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card v-loading="loadingObj.countPraiseNum" :bordered="false">
          <title-name title="各分公司本月表扬信数量" />
          <div v-if="!loadingObj.countPraiseNum" id="monthTestimonial" style="width: 100%; height: 300px" />
          <a-empty v-else description="暂无数据" />
        </a-card>
      </a-col>
    </a-row>
    <a-row :gutter="12">
      <a-col :span="8">
        <a-card v-loading="loading" :bordered="false">
          <title-name title="维保一次性处理完成率" />
          <div v-if="onceNames.length" id="oneMore" style="width: 100%; height: 300px" />
          <a-empty v-else description="暂无数据" />
        </a-card>
      </a-col>
      <a-col :span="16">
        <a-card v-loading="loading" :bordered="false">
          <title-name title="投诉响应时间分析" />
          <div style="display: flex">
            <div class="border-right-pie" v-if="timeData.length" id="time"
              style="width: calc(50% - 6px); height: 300px" />
            <a-empty v-else description="暂无数据" />
            <div v-if="timerData.length" id="timer" style="width: calc(50% - 6px); margin-left: 12px; height: 300px" />
            <a-empty v-else description="暂无数据" />
          </div>
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card v-loading="loading" :bordered="false">
          <title-name title="投诉业态分布分析" />
          <div v-if="formatData.length" id="format" style="width: 100%; height: 300px" />
          <a-empty v-else description="暂无数据" />
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card v-loading="loading" :bordered="false">
          <title-name title="投诉级别分布分析" />
          <div v-if="levelData.length" id="level" style="width: 100%; height: 300px" />
          <a-empty v-else description="暂无数据" />
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card v-loading="loading" :bordered="false">
          <title-name title="投诉施工阶段分布分析" />
          <div v-if="whedData.length" id="whed" style="width: 100%; height: 300px" />
          <a-empty v-else description="暂无数据" />
        </a-card>
      </a-col>
    </a-row>
    <a-card :bordered="false">
      <title-name title="项目维保花费统计（由多到少）" />
      <a-table ref="table" :loading="loading" :pagination="false" :columns="columns" :data-source="tableData"
        row-key="id">
        <template slot="index" slot-scope="text, record, index">
          {{ index * pageNo + 1 }}
        </template>
      </a-table>

      <pagination v-model="pageNo" :total="totalSize" :page-size.sync="pageSize" @change="handlePageChange"
        @showSizeChange="showSizeChange" />
    </a-card>
  </base-breadcrumb>
</template>
<script>
import {
  queryStatisticsCost,
  complaintConstructionStageAnalysis,
  complaintLevelAnalysis,
  complaintFormatsAnalysis,
  complaintHandleAnalysis,
  complaintTimeAnalysis,
  FinishProportion,
  maintenanceAvgScore,
  HandleProportion,
  getMaintenanceNum,
  complaintHandleProportion,
  complaintProportion,
  monthlyComplaint,
  SatisfactionTrendStatistics,
  customerSatisfactionComplaint,
  countPraiseOverview,
  countPraiseNum
} from '@/api/complaint'
import SelectSubCompany from '@/components/Select/SelectSubCompany'
import SelectCompanyAndProject from '@/components/Select/SelectCompanyAndProject'
import { Empty } from 'ant-design-vue'
import debounce from 'lodash/debounce'
// import { color } from 'echarts/lib/export'
import moment from 'moment'
export default {
  name: 'a' + Date.now(),
  data: function () {
    return {
      loadingObj: {
        loadingBnc: false,
        loadingBncType: false,
        countPraiseNum: false
      },
      chartst: null,
      branchComId: '',
      loading: false,
      lineload: false,
      oncePick: 0,
      wbNumber: 0,
      wbNumberPick: 0,
      testimonial: {},//表扬信
      wbOnce: 0,
      numPick: 0,
      blPick: '',
      infoShow: false,
      pathName: this.$route.path,
      queryParam: {},
      infoQueryParam: {},
      wbOnceData: {},
      wbOnceLink: [],
      onceNames: [],
      tableData: [],
      timeData: [],
      timerData: [],
      formatData: [],
      levelData: [],
      whedData: [],
      complaintData: [],
      lineData: {},
      pageNo: 1,
      pageSize: 10,
      totalSize: 0,
      echartsline: null,
      echartsonemore: null,
      echartscomplaints: null,
      echartscomplaintType: null,
      echartstime: null,
      echartsformat: null,
      echartstimer: null,
      echartslevel: null,
      echartswhed: null,
      columns: [
        {
          title: '排名',
          dataIndex: 'index',
          scopedSlots: { customRender: 'index' },
          width: 70
        },
        {
          title: '项目名称',
          dataIndex: 'projectName'
        },
        {
          title: '维保负责人',
          dataIndex: 'responsible'
        },
        {
          title: '维保花费（万）',
          dataIndex: 'cost'
        }
      ]
    }
  },
  created() {
    this.list()
    window.addEventListener('resize', debounce(this.initCharts))
  },
  watch: {
    '$route'() {
      this.branchComId && this.getBranchComId(this.branchComId)
    },
    visible: {
      handler(val) {
        this.getTable()
      },
      immediate: true
    }
  },
  components: {
    SelectSubCompany,
    SelectCompanyAndProject,
    AEmpty: Empty
  },
  mounted: function () {
    this.branchComId = this.$currentPost().id
    this.getBranchComId(this.branchComId)
    this.$bus.$on('handleRefresh' + this.pathName, () => {
      this.list()
    })
  },
  beforeDestroy() {
    window.removeEventListener('resize', debounce(this.initCharts))
    this.$bus.$off('handleRefresh' + this.pathName)
  },
  methods: {
    selectOrg(val) {
        const len = val.length
        if(len===1) {
          this.branchComId = val[0].orgId || ''
        } else if(len == 2) {
          this.branchComId = val[1].orgId || ''
        } else {
          this.branchComId = val[2].orgId || ''
        }
      },
    /**
     * 初始化echarts图表
     */
    initCharts() {
      this.$nextTick(() => {
        this.echartsline.resize()
        this.echartsonemore.resize()
        this.echartstime.resize()
        this.echartsformat.resize()
        this.echartstimer.resize()
        this.echartslevel.resize()
        this.echartswhed.resize()
        this.echartscomplaints.resize()
        this.echartscomplaintType.resize()
      })
    },
    handleToWbPick() {
      let start = new Date(this.getNowTime(void 0, 'Y') + '-01-01').toString()
      let end = new Date(this.getNowTime().slice(0, 10)).toString()
      this.$router.push({
        name: 'MaintenanceSatisfaction',
        params: {
          createTime: [start, end],
          statisticsId: this.branchComId
        }
        // query: JSON.stringify({
        //   status: ['0','1','2']
        // })
      })
    },
    handleTestimonial(val, obj) {
      let start = val * 1 === 1 ? obj?.startTimeYear : obj?.startTimeMonth,
        end = val * 1 === 1 ? obj?.endTimeYear : obj?.endTimeMonth;
      this.$router.push({
        name: 'letter',
        params: {
          gainTime: [start, end],
          statisticsId: this.branchComId
        }
      })
    },
    handleToWb() {
      this.$router.push({
        name: 'standingList',
        params: {
          statisticsId: this.branchComId,
          statusList: ['0', '1', '2']
        }
      })
    },
    handleToWbCs() {
      let start = new Date(this.getNowTime(void 0, 'Y') + '-01-01').toString()
      let end = new Date(this.getNowTime().slice(0, 10)).toString()
      this.$router.push({
        name: 'standingList',
        params: {
          createTime: [start, end],
          statisticsId: this.branchComId,
          statusList: ['4', '5'],
          many: '1'
        }
      })
    },
    getTsTime(value) {
      complaintTimeAnalysis({ branchComId: value }).then((res) => {
        if (res.code == 200) {
          this.timeData = res.data || []
          this.$nextTick(() => {
            this.drawTime('time', res.data)
          })
        }
      })
      complaintFormatsAnalysis({ branchComId: value }).then((res) => {
        if (res.code == 200) {
          this.formatData = res.data || []
          this.$nextTick(() => {
            this.drawTime('format', res.data)
          })
        }
      })
      complaintHandleAnalysis({ branchComId: value }).then((res) => {
        if (res.code == 200) {
          this.timerData = res.data || []
          this.$nextTick(() => {
            this.drawTime('timer', res.data)
          })
        }
      })
      complaintLevelAnalysis({ branchComId: value }).then((res) => {
        if (res.code == 200) {
          this.levelData = res.data || []
          this.$nextTick(() => {
            this.drawTime('level', res.data)
          })
        }
      })
      complaintConstructionStageAnalysis({ branchComId: value }).then((res) => {
        if (res.code == 200) {
          this.whedData = res.data || []
          this.$nextTick(() => {
            this.drawTime('whed', res.data)
          })
        }
      })
    },

    getWbOnce(value) {
      FinishProportion({ branchComId: value }).then((res) => {
        if (res.code == 200) {
          res.data.reverse()
          this.onceNames = res.data.map((item) => (item = item.name))
          if (res.data[0].value == 0 && res.data[1].value == 0) {
            res.data.push({ name: '', url: '', value: res.data[0].value + res.data[1].value })
            res.data.push({ name: '', url: '', value: res.data[0].value + res.data[1].value })
          } else {
            res.data.push({ name: '', url: '', value: res.data[0].value + res.data[1].value })
          }
          this.wbOnceLink = res.data
          console.log(res.data)
          this.$nextTick(() => {
            this.drawMore('oneMore')
          })
        }
      })
    },
    getLine(value) {
      SatisfactionTrendStatistics({ branchComId: value }).then((res) => {
        if (res.code == 200) {
          this.lineData = res.data
          console.log(res.data)
          this.$nextTick(() => {
            this.drawLine('line')
          })
        }
        this.lineload = false
      })
    },
    getCustomerSatisfactionComplaintBar(value) {
      this.loadingObj.loadingBnc = true

      customerSatisfactionComplaint({ type: value }).then((res) => {
        this.loadingObj.loadingBnc = false

        if (res.code == 200) {
          this.$nextTick(() => {
            if (value == 1) {
              this.drawBar('complaint', res.data)
            } else {
              this.drawPie('complaintType', res.data)
            }
          })
        }
      })
    },
    getCustomerSatisfactionComplaintPie(value) {
      this.loadingObj.loadingBncType = true
      customerSatisfactionComplaint({ type: value }).then((res) => {
        this.loadingObj.loadingBncType = false
        if (res.code == 200) {
          this.$nextTick(() => {
            if (value == 1) {
              this.drawBar('complaint', res.data)
            } else {
              this.drawPie('complaintType', res.data)
            }
          })
        }
      })
    },
    getCountPraiseNum() {
      this.loadingObj.countPraiseNum = true
      countPraiseNum({}).then((res) => {
        this.loadingObj.countPraiseNum = false
        if (res.code == 200) {
          this.$nextTick(() => {
            let monthNum = [], yearNum = [], dataMonth = res.data?.monthNum || [], dataYear = res.data?.yearNum || [];
            dataYear.length && dataYear.map((item) => {
              yearNum.push({
                value: item.praiseNum,
                name: item.branchComName,
                statisticsId: item.branchComId,
                startTime: res.data?.startTimeYear,
                endTime: res.data?.endTimeYear
              })
            })
            dataMonth.length && dataMonth.map((item) => {
              monthNum.push({
                value: item.praiseNum,
                name: item.branchComName,
                statisticsId: item.branchComId,
                startTime: res.data?.startTimeMonth,
                endTime: res.data?.endTimeMonth
              })
            })
            this.drawBar('annualTestimonial', yearNum, true)
            this.drawBar('monthTestimonial', monthNum, true)
          })

        }
      })
    },
    drawPie(id, data) {
      this[`echarts${id}`] = this.$echarts.init(document.getElementById(id))
      this[`echarts${id}`].setOption({
        tooltip: {
          trigger: 'item'
        },
        graphic: {
          type: 'text',
          left: '33%',
          top: 'center',
          style: {
            text: `类型分布`,
            textAlign: 'center',
            width: '50',
            fill: '#666'
          }
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right: '5%',
          top: '10%',
          itemWidth: 20,
          itemHeight: 15,
          bottom: 10,
          textStyle: {
            fontSize: 10 //文字的字体大小
          }
        },
        color: ['#0086FF', '#00CB52', '#00C6C5', '#FF275A', '#FFD000', '#49FFFF', '#D069FF', '#C17300', '#FA7688', '#BCC500', '#160085', '#387F00', '#79490b'],
        series: [
          {
            // name: '响应时间',
            type: 'pie',
            radius: ['25%', '50%'],
            center: ['55%', '50%'],
            legendHoverLink: false,
            label: {
              show: true,
              normal: {
                show: true,
                position: 'outside', //标签的位置
                textStyle: {
                  // fontWeight: 300,
                  fontSize: 11, //文字的字体大小
                  color: '#666666'
                },
                formatter: '{b}\n{d}%'
              },
              // position: 'center'
            },
            right: '33%',
            emphasis: {
              label: {
                show: true,
                // fontSize: '10',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: true,
              smooth: true
              // length:30
            },
            data: data
          }
        ]
      })
      const that = this
      this[`echarts${id}`].on('click', function (param) {
        that.$router.push({
          name: '/complaint/Management/list',
          params: { treeId: param.data.treeId, statisticsId: that.branchComId, createTime: [that.moment(param.data.startTime), that.moment(param.data.endTime)] }
        })
      })
    },
    drawBar(id, data, flag) {
      const names = data.map((i) => i.name), nameVal = flag ? '表扬信数量（次）' : '投诉数量（次）',
        hoverName = flag ? '表扬信数量' : '投诉数量';
      this.echartsComplaints = this.$echarts.init(document.getElementById(id))
      this.echartsComplaints.setOption({
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },

        grid: {
          left: '5%',
          right: '4%',
          top: '10%',
          bottom: '2%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          // show: true,
          data: names,
          axisLabel: {
            overflow: 'truncate',
            width: 50,
            rotate: 45,
            // backgroundColor: '#ff3333',
            interval: 0
          }
        },
        yAxis: {
          type: 'value',
          name: nameVal,
          nameTextStyle: {
            padding: [0, 0, 0, 30] // 上右下左与原位置距离
          },
          minInterval: 1,
          axisLine: {
            //y轴
            show: true
          },
          splitLine: {
            show: false
          }
        },
        series: [
          {
            name: hoverName,
            type: 'bar',
            barWidth: '50%',
            label: {
              show: true,
              position: [14, -12],
              color: '#000'
            },
            data: data
          }
        ]
      })
      const that = this
      this.echartsComplaints.on('click', function (param) {
        let name = flag ? 'letter' : '/complaint/Management/list',
          params = { statisticsId: param.data.statisticsId }
        if (flag) {
          params.gainTime = [param.data.startTime, param.data.endTime]
        } else {
          params.createTime = [that.moment(param.data.startTime), that.moment(param.data.endTime)];
        }
        console.log(params, 'params')
        that.$router.push({
          name,
          params
        })
      })
    },

    handleToTime() {
      let start = new Date(this.getNowTime().slice(0, 8) + '01').toString()
      let end = new Date(this.getNowTime().slice(0, 10)).toString()

      this.$router.push({
        name: '/complaint/Management/list',
        params: {
          statisticsId: this.branchComId,
          createTime: [start, end]
        }
      })
    },
    handleTots() {
      let start = new Date(this.getNowTime(void 0, 'Y') + '-01-01').toString()
      let end = new Date(this.getNowTime().slice(0, 10)).toString()
      this.$router.push({
        name: '/complaint/Management/list',
        params: {
          createTime: [start, end],
          statisticsId: this.branchComId,
          statusList: ['2', '4']
        }
      })
    },
    handleTooncets() {
      let start = new Date(this.getNowTime().slice(0, 8) + '01').toString()
      let end = new Date(this.getNowTime().slice(0, 10)).toString()
      this.$router.push({
        name: '/complaint/Management/list',
        params: {
          createTime: [start, end],
          statisticsId: this.branchComId,
          statusList: ['4'],
          many: 1
        }
      })
    },
    getBranchComId(v) {
      this.getLine(v)
      this.getWbOnce(v)
      this.getTsTime(v)
      if ((v = '53085e2c9f1f4685801ef31994f57c49')) {
        this.getCustomerSatisfactionComplaintBar(1)
        this.getCustomerSatisfactionComplaintPie(2)
        this.getCountPraiseNum();
      }

      this.list()
      this.loading = true
      monthlyComplaint({ branchComId: this.branchComId }).then((res) => {
        console.log(res)
        if (res.code == 200) {
          this.numPick = res.data || 0
        }
      })
      complaintProportion({ branchComId: this.branchComId }).then((res) => {
        this.blPick = res.data.message || 0
      })
      complaintHandleProportion({ branchComId: this.branchComId }).then((res) => {
        if (res.code == 200) {
          this.oncePick = res.data || 0
        }
      })
      getMaintenanceNum({ branchComId: this.branchComId }).then((res) => {
        if (res.code == 200) {
          this.wbNumber = res.data || 0
        }
      })
      HandleProportion({ branchComId: this.branchComId }).then((res) => {
        if (res.code == 200) {
          this.wbOnce = res.data || 0
        }
      })
      maintenanceAvgScore({ branchComId: this.branchComId }).then((res) => {
        this.loading = false
        if (res.code == 200) {
          this.wbNumberPick = res.data || 0
        }
      })
      countPraiseOverview({ branchComId: this.branchComId }).then((res) => {
        this.loading = false
        if (res.code == 200) {
          this.testimonial = res.data || {}
          console.log(this.testimonial, 'this.testimonial')
        }
      })
    },
    drawMore(id) {
      this.echartsonemore = this.$echarts.init(document.getElementById(id))
      this.echartsonemore.setOption({
        legend: {
          data: this.onceNames,
          top: '80%',
          textStyle: {
            fontStyle: 'normal',
            fontWeight: 'normal',
            fontFamily: 'sans-serif',
            fontSize: 11
          }
        },
        graphic: {
          type: 'text',
          left: 'center',
          top: '50%',
          style: {
            text: `${((this.wbOnceLink[0].value / (this.wbOnceLink.reduce((pre, cur) => (pre.value || 0) + (cur.value || 0)) || 1)) * 100).toFixed(0)}%`,
            textAlign: 'center',
            font: 'italic bolder 32px cursive',
            width: '50',
            fill: '#000',
            height: '50'
          }
        },
        color: ['#77C489', '#F2F2F2', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)'],
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['80%', '100%'],
            avoidLabelOverlap: false,
            startAngle: -180,
            center: ['50%', '75%'],
            label: {
              show: false,
              position: 'center'
              // formatter: (a) => {
              //   // console.log(a)
              //   return <div style="fontSize:50px">${12121}</div>
              // }
              // normal: {
              //   show: true,
              //   position: "inner", //显示在扇形上
              //   formatter: "{b}:{c}", //显示内容
              //   textStyle: {
              //     color: "#333", // 改变标示文字的颜色
              //     fontSize: 12, //文字大小
              //     fontWeight: "bold",
              //   },
              // },
            },
            emphasis: {
              label: {
                show: true,
                // formatter: "{b}:{c}", //显示内容
                formatter: function (params) {
                  if (params.data.name != '') {
                    return params.data.name + ' : ' + params.data.value
                  } else {
                    return ''
                  }
                },

                fontSize: '15',
                color: '#333',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.wbOnceLink
          }
        ]
      })
      const that = this
      this.echartsonemore.on('click', function (params) {
        let statusList
        if (params.data) {
          if (params.data.many == 1) {
            statusList = ['4', '5']
          }
        } else {
          statusList = null
        }
        if (params.data.name != '') {
          that.$router.push({
            name: 'standingList',
            params: { ...params.data, statusList, statisticsId: that.branchComId }
          })
        }
      })
    },

    drawTime(id, data) {
      this[`echarts${id}`] = this.$echarts.init(document.getElementById(id))
      this[`echarts${id}`].setOption({
        tooltip: {
          trigger: 'item'
        },
        // title: {
        //   text: '响应时间',
        //   left: '50%',
        //   top: '90%',
        //   textAlign: 'center'
        // },
        legend: {
          orient: 'vertical',
          right: '3%',
          top: '-2%',
          itemWidth: 20,
          itemHeight: 15,
          bottom: 10,
          textStyle: {
            fontSize: 10 //文字的字体大小
          }
        },
        color: ['#77C489', '#599FF7', '#f56350', '#9062DF', '#aa557f', '#f5ef29', '#ffb2fc', '#79490b', '#320b79'],
        series: [
          {
            // name: '响应时间',
            type: 'pie',
            radius: ['35%', '60%'],
            center: ['55%', '53%'],
            // avoidLabelOverlap: false,
            label: {
              show: true,
              normal: {
                show: true,
                position: 'outside', //标签的位置
                textStyle: {
                  // fontWeight: 300,
                  fontSize: 11, //文字的字体大小
                  color: '#666666'
                },
                formatter: '{b}\n{d}%'
              }
            },

            right: '5%',
            emphasis: {
              label: {
                show: true,
                // fontSize: '10',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              smooth: true,
              show: true
            },
            data: data
          }
        ]
      })
      const that = this
      this[`echarts${id}`].on('click', function (param) {
        let statusList
        if (param.data) {
          if (param.data.many == 1) {
            statusList = ['4']
          }
        } else {
          statusList = null
        }
        that.$router.push({
          name: '/complaint/Management/list',
          params: { ...param.data, statusList, statisticsId: that.branchComId }
        })
      })
    },
    drawLine(id) {
      this.echartsline = this.$echarts.init(document.getElementById(id))
      this.echartsline.setOption({
        title: {
          text: ' '
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#0E9CFF'
            }
          }
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: '#f3f3f3'
              }
            },
            type: 'category',
            boundaryGap: false,
            data: this.lineData.time
          }
        ],
        yAxis: [
          {
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: '#ccc'
              }
            },
            type: 'value'
          }
        ],
        series: [
          {
            name: '满意度评分',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.lineData.score,
            normal: {
              color: '#0E9CFF' //改变区域颜色
            },
            itemStyle: {
              normal: {
                borderWidth: 2,
                borderColor: '#0E9CFF',
                color: '#CFEBFF', //改变折线点的颜色
                lineStyle: {
                  color: '#0E9CFF' //改变折线颜色
                }
              }
            },
            markPoint: {
              itemStyle: {}
            }
          }
        ]
      })
      const that = this
      this.echartsline.on('click', function (params) {
        // const start = new Date(params.name + '-01').toString()
        // const end = new Date(that.getMonthFinalDay(params.name.slice(0, 4), params.name.slice(5, 8))).toString()
        that.$router.push({
          name: 'satisfactionsurvey',
          // name: 'MaintenanceSatisfaction',
          params: {
            // createTime: [start, end],
            statisticsId: that.branchComId,
            surveyMonth: params.name
            // branchComId: this.branchComId
          }
        })
      })
    },
    getMonthFinalDay(year, month) {
      var day = ''
      if (year == null || year == undefined || year == '') {
        year = new Date().getFullYear()
      }
      if (month == null || month == undefined || month == '') {
        month = new Date().getMonth() + 1
      }
      day = new Date(new Date(year, month).setDate(0)).getDate()
      return year + '-' + month + '-' + day
    },
    list(params, callback) {
      if (!this.branchComId) {
        return
      }
      this.loading = true
      let _this = this
      const searchData = {
        pageSize: callback ? _this.totalSize : _this.pageSize,
        pageNum: _this.pageNo,
        param: {
          branchComId: this.branchComId
        }
      }
      queryStatisticsCost(searchData).then((res) => {
        if (res.code === 200) {
          if (callback) {
            if (res.data.list.length) {
              callback(res.data.list)
            } else {
              this.$message.warning('没有可导出的数据')
            }
            this.loading = false
            return
          }
          // 设置唯一索引
          res.data.list.forEach((i, idx) => {
            i.id = idx
          })
          _this.tableData = res.data.list
          _this.totalSize = res.data.total
        }
        this.loading = false
      })
    },

    handlePageChange(pageNo, pageSize) {
      this.pageNo = pageNo
      this.list()
      this.selectedRowKeys = []
    },
    showSizeChange(pageNo, pageSize) {
      this.pageNo = 1
      this.pageSize = pageSize
      this.list()
    },

    handleEdit(record, state) {
      this.$router.push({
        name: 'AddComplaint',
        query: {
          id: (record && record.id) || '',
          state: state
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.card-box {
  display: flex;
  align-items: center;
  padding: 0 30px;
}

.card-title {
  font-size: 23px;
  font-weight: 550;
  margin-right: 20px;
}

.flex-bet {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: space-around;

  // padding: 0 80px;
  >div {
    // width: 25%;
    height: 150px;
  }
}

.title-margin {
  margin-top: 12px;
  font-weight: 550;
}

.title-top {
  height: 80px;
  line-height: 80px;
  font-weight: 550;
  font-size: 28px;
  cursor: pointer;
}

/deep/.ant-modal {
  width: 900px !important;
}

.unit-name {
  color: #ccc;
  font-size: 10px;
}

.border-right {
  position: relative;

  &:after {
    content: '';
    position: absolute;
    width: 1px;
    height: 86%;
    right: -17%;
    top: 0;
    background: #f5f5f5;
  }
}

.border-right-pie {
  position: relative;

  &:after {
    content: '';
    position: absolute;
    width: 1px;
    height: 80%;
    right: -6px;
    bottom: 10px;
    background: #f5f5f5;
  }
}
</style>
